import Taro, { Component } from '@tarojs/taro'
import { View, Input } from '@tarojs/components'
import { AtToast } from "taro-ui"
import './index.scss'

class BdPhone extends Component {
  constructor() {
    super(...arguments)
    this.state = {
      isShowTime: false,
      text: "获取验证码",
      time: 60,
      phone: "",
      code: "",
      isShowToast: false,
      disabled: false
    }
  }
  config = {
    navigationBarTitleText: '绑定手机号',
  }
  componentDidMount() {
    this.setState({
      phone: "",
      code: ""
    })
  }
  componentWillUnmount() {
    console.log(123)
  }
  getPhone(e) {
    let { code } = this.state;
    let disabled = e.detail.value && code
    this.setState({
      phone: e.detail.value,
      disabled: disabled
    })
  }
  getCode(e) {
    let { phone } = this.state;
    let disabled = phone && e.detail.value
    this.setState({
      code: e.detail.value,
      disabled: disabled
    })
  }

  BtnCode() {
    let timer = null;
    clearInterval(timer)
    this.setState({
      text: '重新获取',
      isShowTime: true
    }, () => {
      let time = 60;
      timer = setInterval(() => {
        time--;
        this.setState({ time })
        if (time == 0) {
          clearInterval(timer)
          time = 60;
          this.setState({
            isShowTime: false
          })
        }
      }, 1000)
    })
  }
  submit() {
    this.setState({
      isShowToast: true
    }, () => {
      setTimeout(() => {
        this.setState({
          isShowToast: false
        })
      }, 1500)
    })
  }
  render() {
    let { text, isShowTime, phone, code, disabled } = this.state;
    return (
      <View className='p-login'>
        <View className="input-box">
          <View className="icon-box">
            <Image className="img1" src={require("../../asset/imgs/sjh.png")} />
          </View>
          <Input className="care-num" value={phone} onInput={this.getPhone} type='number' maxLength='11' placeholder="请输入手机号" placeholder-style="color:#ccc;" />
        </View>
        <View className="input-box">
          <View className="icon-box">
            <Image className="img2" src={require("../../asset/imgs/yzm.png")} />
          </View>
          <Input className="care-num" value={code} onInput={this.getCode} type='number' maxLength='4' placeholder="请输入验证码" placeholder-style="color:#ccc;" />
          <View className="getCode">
            <View class={isShowTime ? "none" : ""} onClick={this.BtnCode.bind(this)}>{text}</View>
            <View class={isShowTime ? "" : "none"}>{time}s</View>
          </View>
        </View>
        <View className="hint">为了保证账号安全，请绑定手机号</View>
        <View className={disabled ? "confirm-btn-d confirm-btn" : "confirm-btn-d"} onClick={this.submit}>确定</View>
        <AtToast
          isOpened={this.state.isShowToast}
          text="验证码输入有误，请重试"
          duration="2000"
        ></AtToast>
      </View>
    )
  }
}

export default BdPhone
